<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_盒子模型外间距测试</title>
    <style>
        /* 去除所有元素自带的内外间距 */
        * {
            margin: 0;
            padding: 0;
        }
        .fu {
            background-color: rgba(255,255,0,.6);
            /* 首个子元素的上外间距与最后一个子元素的下外间距会超出父元素的范围
            父子粘连:子元素的上外间距会导致父元素一起下移
            解决方法: 给父元素设置BFC结界保护 */
            /*BFC 让父元素 "认识" 到子元素的所有空间（包括外间距），
            从而自动 "撑大" 自己来完整包裹子元素，而不是让子元素 "缩小"。*/
            /*overflow: hidden;*/
        }
        .fu>div {
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,255,.6);
            border: 2px solid #00f;
            color: #fff;
            font-size: 25px;
            font-weight: bold;
        }
        .z1 {
            /* top上 right右 bottom下 left左 center居中 */
            margin-bottom: 50px;   /* 把z2挤下去了，父的高度同时增加50px,与bfc结界保护没关系 */
            /*margin-top: 50px;*/
        }
        .z2 {
            /* 1.在垂直方向上,相邻兄弟间的外间距取大值显示 */
            /*margin-top: 70px;*/
        }
        .z4 {
            /*margin-bottom: 50px;*/
        }
        .z3 {
            /*margin: 10px; !*四个方向的外间距都是10*!*/
            /*margin: 10px 20px;!*上下10 左右20*!*/
            /*margin: 10px 20px 30px;!*上10 左右20 下30*!*/
            /*margin: 10px 20px 30px 40px;!*上10 右20 下30 左40 *!*/
            /*!* 实现块级元素自身的水平居中 auto会自动将元素的左右外间距计算成相等的值 *!*/
            /*margin: 0 auto;*/
        }
        span {
            background-color: rgba(255,0,0,.5);
            border: 2px solid #f00;
        }
        .s2 {
            /* 行内元素在垂直方向上的内外间距都不生效!无法使用! */
            margin: 20px;
            padding: 40px;
        }
    </style>
</head>
<body>
<span>span</span><span class="s2">span</span><span>span</span>
<!-- .fu>.z*4 Tab补齐-->
<div class="fu">
    <div class="z1">111</div>
    <div class="z2">222</div>
    <div class="z3">333</div>
    <div class="z4">444</div>
</div>
</body>
</html>

<!--
当你注释掉 BFC（即 overflow: hidden 不生效）时，父元素 .fu 的高度增加 50px，本质是因为子元素的位置变化间接导致的，而非父元素主动 "计算并包含" 了这个外间距。具体可以拆成两步理解：
第一步：margin-bottom: 50px 让子元素序列整体变长
.z1 的 margin-bottom: 50px 会强制 .z2 向下移动 50px（形成间距）。此时整个子元素序列（.z1→.z2→.z3→.z4）的总垂直占用空间，比没有这个外间距时多了 50px（因为 .z2、.z3、.z4 都被整体推下去了）。
第二步：父元素被动 "包裹" 变长后的子元素序列
由于父元素没有设置固定高度，它的高度默认由 "最顶部子元素的顶部" 到 "最底部子元素的底部" 的距离决定。
当子元素序列整体变长 50px 后，父元素为了能完整显示所有子元素（不被截断），高度会被动增加 50px—— 这就像你把一堆书往下挪了 50px，装书的盒子必须加高才能装下一样。
关键区别：
未触发 BFC 时：父元素高度增加是 "被迫" 的，它并没有把 .z1 的 margin-bottom: 50px 当成自己的一部分，只是因为子元素位置变了，不得不跟着变长。
触发 BFC 时：父元素会主动把 .z1 的 margin-bottom: 50px 算作自己高度的一部分（类似给盒子内部加了一层 padding），此时高度增加是 "主动包含" 的结果，更直接。
所以即使注释了 BFC，margin-bottom: 50px 仍然会通过改变子元素位置，间接让父元素高度增加 —— 但这种影响方式和 BFC 生效时的 "主动计算外间距" 是不同的，本质上还是和外间距的作用相关联。
-->